<!--  -->
<template>
  <div>
    <vue-ueditor-wrap v-model="content" :config="editorConfig" 
    @ready="ready"

    editor-id="editor-demo-01">

    </vue-ueditor-wrap>
  </div>
</template>

<script>
import { ref } from 'vue';
import '/public/UEditor/ueditor.config.js'
import '/public/UEditor/ueditor.all.js'
import '/public/UEditor/ueditor.parse.js'
import '/public/UEditor/lang/zh-cn/zh-cn.js'
import '/public/UEditor/themes/default/css/ueditor.css'

export default {

  name:'UEditor',
  components: {},
  props:{
        /* 编辑器Id */
    editorId: {
      type: String,
      default: '',
    },
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: 300,
    }
  },
  data () {
  return {
    content: '',
    editor: null,
    myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 工具栏是否可以浮动
        autoFloatEnabled: false,
        // 关闭自动保存
        enableAutoSave: true,
        // 初始容器高度
        initialFrameHeight: 900,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口
        //serverUrl: 'http://localhost:8080/',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况
        UEDITOR_HOME_URL: './static/UEditor/',
        allowDivTransToP: false,
        disabledTableInTable: false,
        toolbars: [
            [
                'source', //源代码
                'undo', //撤销
                'redo', //重做
                'formatmatch', //格式刷
                'bold', //加粗
                'italic', //斜体
                'underline', //下划线
                'strikethrough', //删除线
                'superscript', //上标
                'subscript', //下标
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对齐
                'justifyjustify', //两端对齐
                'rowspacingtop', //段前距
                'rowspacingbottom', //段后距
                'lineheight', //行间距
                'anchor', //锚点
                'indent', //首行缩进
                // 'snapscreen', //截图
                'fontborder', //字符边框
                'blockquote', //引用
                'pasteplain', //纯文本粘贴模式
                'selectall', //全选
                'horizontal', //分隔线
                'removeformat', //清除格式
                'time', //时间
                'date', //日期
                'insertcode', //代码语言
                'inserttable', //插入表格
                'insertrow', //前插入行
                'insertcol', //前插入列
                'mergeright', //右合并单元格
                'mergedown', //下合并单元格
                'deleterow', //删除行
                'deletecol', //删除列
                'splittorows', //拆分成行
                'splittocols', //拆分成列
                'splittocells', //完全拆分单元格
                'edittable', //表格属性
                'edittd', //单元格属性
                'insertparagraphbeforetable', //"表格前插入行"
                'deletecaption', //删除表格标题
                'inserttitle', //插入标题
                'mergecells', //合并多个单元格
                'deletetable', //删除表格
                'customstyle', //自定义标题
                'fontfamily', //字体
                'fontsize', //字号
                'paragraph', //段落格式
                'simpleupload', //单图上传
                // 'insertvideo', //视频
                // 'insertimage', //多图上传
                'unlink', //取消链接
                'link', //超链接
                // 'emotion', //表情
                'spechars', //特殊字符
                'searchreplace', //查询替换
                'map', //Baidu地图
                'gmap', //Google地图
                'forecolor', //字体颜色
                'backcolor', //背景色
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                'fullscreen', //全屏
                'directionalityltr', //从左向右输入
                'directionalityrtl', //从右向左输入
                'pagebreak', //分页
                'insertframe', //插入Iframe
                'imagenone', //默认
                'imageleft', //左浮动
                'imageright', //右浮动
                // 'attachment', //附件
                'imagecenter', //居中
                'wordimage', //图片转存
                'edittip ', //编辑提示
                'autotypeset', //自动排版
                // 'webapp', //百度应用
                'touppercase', //字母大写
                'tolowercase', //字母小写
                'background', //背景
                'template', //模板
                'scrawl', //涂鸦
                'music', //音乐
                'drafts', // 从草稿箱加载
                // 'charts', // 图表
                'cleardoc', //清空文档
                'preview', //预览
                'print', //打印
                'help', //帮助
            ]
        ],
    }
    }
  },
  computed: {},
  watch: {
    value(val) {
                this.content = val;
            },
            content(val) {
                let text = this.editor ? this.editor.getContentTxt() : "";
                this.$emit('change', val, text);
            }

  },
  created() {
      this.editorConfig = {
      UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径，可参考常见问题1
     // serverUrl: 'http://localhost:8080/config/UeditorConfig', // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
    };
  
  },
  mounted(){
     this.content = this.value;
  },
  methods: {
    ready(editorInstance) {
                this.editor = editorInstance;
            },
      insertDefineHtml(html) {
          this.editor.execCommand('inserthtml', html);
      }
  },
  destroyed () {
    this.editor.destroy()
  }
}

</script>
<style lang='less' scoped>
</style>